<!DOCTYPE html>
<html>
<head>
    <!-- <meta charset="UTF-8"> -->
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <@mup.header/>
    <!--引入微服务平台的样式-->
    <@mup.link  href="/mine/vue2.6/css/index.css?v=2023-04-24T10:54:57Z" model="all"/>
    <@mup.link  href="/mine/vue2.6/css/tempo.css?v=2023-04-24T10:54:57Z" model="all"/>

    <!--引入vue-->
    <@mup.script src="/mine/vue2.6/js/vue-2.6.14.js?v=2023-04-24T10:54:57Z" model="all"/>
    <!--引入http-vue-loader-->
    <@mup.script src="/mine/vue2.6/js/http-vue-loader-1.4.2.js?v=2023-04-24T10:54:57Z" model="all" />
    <!--引入elemenui组件库-->
    <@mup.script src="/mine/vue2.6/js/element-ui@2.15.2.js?v=2023-04-24T10:54:57Z" model="all"/>
    <@mup.link href="/ai_runtime/css/creat-gray.css?v=2023-04-24T10:54:57Z" model="all"/>
    <mscript src="${gatewayPath}/ai_design/view/dialog/js/creategray.js?v=2023-04-24T10:54:57Z"/>
</head>
<body>
    <div id="tempo-ai-gray-config">
        <el-form
            ref="grayConfigRef1"
            :model="grayConfigForm1"
            :rules="grayConfigRule1"
            label-width="100px"
            label-position="right">
            <el-row>
                <el-form-item label="<@spring.message "aiview.app_name"/>" prop="name" >
                    <el-input
                            id="grayServiceName"
                            @blur="nameBlur()"
                            style="width: 330px"
                            v-model.trim="grayConfigForm1.name"
                            placeholder="<@spring.message "aiview.input_service_name"/>"
                            clearable></el-input>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item label="<@spring.message "aiview.service_alias"/>" prop="serviceAddr">
                    <el-input
                            id="grayServiceAddr"
                            @blur="addrBlur()"
                            style="width: 575px"
                            @change="getServiceAddr(grayConfigForm1.serviceAddr)"
                            v-model.trim="grayConfigForm1.serviceAddr"
                            placeholder="<@spring.message "aiview.input_service_alias"/>"
                            clearable>
                        <template slot="prepend">${urlPrefix}/ai/webapi/model/gray/</template>
                    </el-input>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item label="<@spring.message "aiview.syncService1"/>" prop="serviceName1">
                    <el-cascader
                            id="syncServiceName1"
                            @change="getSameMessage1(grayConfigForm1.serviceName1)"
                            :options="syncFlowOptions"
                            :props="syncFlowProps"
                            v-model.trim="grayConfigForm1.serviceName1"
                            style="width :280px">
                        <template slot-scope="scope">
                            <span :title="scope.data.NAME">{{scope.data.NAME}}</span>
                        </template>
                    </el-cascader>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item label="<@spring.message "aiview.syncService2"/>" prop="serviceName2">
                    <el-cascader
                            clearable
                            id="syncServiceName2"
                            @change="getSameMessage2(grayConfigForm1.serviceName2)"
                            :options="syncFlowOptions"
                            :props="syncFlowProps"
                            v-model.trim="grayConfigForm1.serviceName2"
                            style="width :280px">
                        <template slot-scope="scope">
                            <span :title="scope.data.NAME">{{scope.data.NAME}}</span>
                        </template>
                    </el-cascader>
                </el-form-item>
            </el-row>

            <el-row v-if="grayConfigForm1.serviceName1 != '' && grayConfigForm1.serviceName2 != ''">
                <el-form-item label="<@spring.message "aiview.publishType"/>" prop="publishType">
                    <el-radio  v-model="grayConfigForm1.publishType" label="0"><@spring.message "aiview.flow_segmentation"/></el-radio>
                    <el-radio  v-model="grayConfigForm1.publishType" label="1"><@spring.message "aiview.the_specified_service"/></el-radio>
                </el-form-item>
            </el-row>

            <el-row v-if="grayConfigForm1.publishType === '0' && grayConfigForm1.serviceName1 != '' && grayConfigForm1.serviceName2 != ''">
                <el-col :span="12">
                    <el-form-item  prop="serviceValue1">
                        <i class="el-icon-warning-outline" @mouseover="mouseover()" @mouseleave="mouseLeaver()"></i>
                        <span id="sync1"><@spring.message "aiview.syncService1"/></span>
                        <el-input-number
                                @change="handleChange1"
                                :min = 1
                                :max = 99
                                v-model.trim="grayConfigForm1.serviceValue1"
                                clearable></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  prop="serviceValue2">
                        <span><@spring.message "aiview.syncService2"/></span>
                        <el-input-number
                                @change="handleChange2"
                                :min = 1
                                :max = 99
                                v-model.trim="grayConfigForm1.serviceValue2"
                                clearable></el-input-number>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row v-if="grayConfigForm1.publishType === '1' && grayConfigForm1.serviceName1 != '' && grayConfigForm1.serviceName2 != ''">
                <el-form-item  prop="selectValue">
                    <span><@spring.message "aiview.select_service"/></span>
                    <el-select style="width :50%" v-model="grayConfigForm1.selectValue">
                        <el-option label="<@spring.message "aiview.syncService1"/>" value="0"></el-option>
                        <el-option label="<@spring.message "aiview.syncService2"/>" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
        </el-form>

    </div>
</body>
</html>
